﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<title>Test Case 19: Prefilling form data &laquo; Web Forms 2.0 Test Suite</title>
		<meta name="author" content="Weston Ruter">
		<meta name="description" content="">
		<script type="text/javascript" src="../webforms2-p.js"></script>
		<link rel="stylesheet" type="text/css" href="testcase.css"><!-- ISSUE: When this stylesheet is placed here after the script tag, MSIE sometimes cannot initialize Repetition Model before onload -->
		<!-- prev --><link rel="prev" href="018.html"><!-- /prev -->
		<!-- next --><link rel="next" href="020.html"><!-- /next -->
		<link rel="home" href="index.html">
		
		<script type="text/javascript">
		//$wf2.getElementsByTagNamesAndAttribute.apply(document.documentElement, [['option','input'], 'value']);
		window.filledContainers = 0;
		</script>
		<style type="text/css">
		.failure {
			background-color:#FFCCCC;
			padding:.4ex;
		}
		.success {
			background-color:#99FF99;
			padding:.4ex;
		}
		</style>
		
	</head>
	<body>
		<div id="testSuiteNote">

			<h1>Web Forms 2.0 Test Case 19: Prefilling form data</h1>
			<p class="purpose">
			This test case demonstrates functionality of the Web Forms 2.0 specification and tests the compliance of 
			this cross-browser <a href="http://code.google.com/p/webforms2/">Web Forms 2.0 implementation</a>.</p>

			 <p>Regarding fetching data from external resources, the <a href="http://whatwg.org/specs/web-forms/current-work/#fetching-data">specification</a> states:</p> <blockquote> <p>There are two scenarios where authors may wish data to be fetched from an external file to fill forms. In the first, a select's options are replaced by options from an external file. In the second, a form's values are prefilled from an external data source.</p> <p>In both cases, the prefilling may either be full, in which case the previous contents are removed first, or incremental, in which case the fetched data is in addition to the data already in the form. </p> </blockquote> 
			
			<div class="testSuiteNavigation">
				<!-- prev -->&larr;&nbsp;<a href="018.html" class="prev">Input Controls in Nested Repetition Blocks</a> |<!-- /prev -->
				<a href="index.html" class="index">Test Suite Index</a>
				<!-- next -->| <a href="020.html" class="next">Creating Repetition Templates Dynamically</a>&nbsp;&rarr;<!-- /next -->
			</div>
			
			<hr>
		</div>
  

	<h1>Filling <code>select</code> elements</h1>
	<form onsubmit="return true" action="019.html">
		
		<p>States and provinces: <select name="statesAndProvinces" data="019-statesAndProvinces.xml"></select> (3 states, 2 provinces)</p>
		<!--<p><datalist data="019-statesAndProvinces.xml"></datalist></p>-->
		<p>Colors: <select name="colors" data="019-colors.xml">
			<option value="#FF9900">Orange</option>
			<option value="#FFFF00">Yellow</option>
			<option value="#663366">Purple</option>
		</select> (there should be 8 colors, 5 provided incrementally)</p>
		<!--<p><input name="img1" type="image" src=""></p>-->

		<p><button type="submit">Submit</button></p>
	</form>
	
	<h1>Seeding a form with initial values</h1>
	<p>The <code>formdata</code> XML file associated with the following form first
	clears all of the existing repetition blocks. Then it adds two repetition blocks
	with indexes 100 and 101. Then it prefills the values of these two repetition blocks.</p>
	<form onsubmit="return false" data="019-formdata.xml">
		<ol>
			<li repeat="0">
				<label><input type="text" name="input0" value="delete me 0" ></label>
				<input type="remove">
				<input type="move-down">
				<input type="move-up">
			</li>
			<li repeat="1">
				<label><input type="text" name="input1" value="delete me 1" ></label>
				<input type="remove">
				<input type="move-down">
				<input type="move-up">
			</li>
			<li repeat="2">
				<label><input type="text" name="input2" value="delete me 2" ></label>
				<input type="remove">
				<input type="move-down">
				<input type="move-up">
			</li>
			<li repeat="3">
				<label><input type="text" name="input3" value="delete me 3" ></label>
				<input type="remove">
				<input type="move-down">
				<input type="move-up">
			</li>
			<li id='i' repeat="template" repeat-start="3" repeat-max="4">
				<label><input type="text" name="input[i]" value="index [i]" ></label>
				<input type="remove">
				<input type="move-down">
				<input type="move-up">
			</li>
		</ol>
		<input type="add" template="i">
			
		<p><label>Only the first two <code>option</code>s of the <code>select</code> element below should be selected.
		The last <code>option</code> has a <code>selected</code> attribute set, but as per the spec, it should be cleared:<br>
		<select name="select" multiple="multiple">
			<option>test</option>
			<option>test</option>
			<option selected>test</option>
		</select></label>
		</p>

		<p>Last two checkboxes below should be checked (prefilling failed if only "Red" is checked):
		<label><input type="checkbox" name="colorRed" type="" value="red" checked> Red </label>
		<label><input type="checkbox" name="colorGreen" value="green"> Green</label>
		<label><input type="checkbox" name="colorBlue" value="blue"> Blue</label>
		</p>

		<p>The "Evening" button should be selected (prefilling failed if "Afternoon" is checked):
			<label><input type="radio" name="time" value="morning"> Morning</label>
			<label><input type="radio" name="time" value="afternoon" checked> Afternoon</label>
			<label><input type="radio" name="time" value="evening"> Evening</label>
			<label><input type="radio" name="time" value="night"> Night</label>
		</p>

		<p><label>Datetime (should be empty since invalid <code>field</code> value provided): <input type="datetime" name="datetimeTest"></label></p>
		<p><label>Week (should be prefilled): <input type="week" name="weekTest"></label></p>
	</form>

	<!-- ########################################### -->
	<h1>Setting <code>data</code> DOM property dynamically on <code>select</code> elements</h1>

	<p>The following tests are adapted from an example in the <a href="http://www.whatwg.org/specs/web-forms/current-work/#selectSeeding">Filling <code>select</code> elements</a> section.
	The eight following <code>select</code> elements should have exactly the same contents.<!-- The following
	<code>data</code> attributes are set dynamically <em>after</em> the page has loaded. The setting
	of the attribute is first detected by DOM2 MutationEvents and secondly by JavaScript 1.6 Setters, thus they are not
	supported by Internet Explorer.--> Note that only the first four will work in Internet Explorer 7.</p>

	<ol id='dynamicDataOnSelectTests'>
		<li id='selectContainer1'>
			<span class='result'><em>Loading...</em></span>
			Before onload, <code>data</code> DOM attribute set on statically created element:
			<select></select>
		</li>
		<script type="text/javascript">
		var select = document.getElementById('selectContainer1').getElementsByTagName('select')[0];
		select.data = 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E';
		var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
		option.appendChild(document.createTextNode('a'));
		select.appendChild(option);
		// at this point, select.length == 1 is guaranteed
		</script>

		<li id='selectContainer2'>
			<span class='result'><em>Loading...</em></span>
			Before onload, <code>data</code> content attribute set on statically created element:
			<select></select>
		</li>
		<script type="text/javascript">
		var select = document.getElementById('selectContainer2').getElementsByTagName('select')[0];
		select.setAttribute('data', 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E');
		var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
		option.appendChild(document.createTextNode('a'));
		select.appendChild(option);
		// at this point, select.length == 1 is guaranteed
		</script>

		<li id='selectContainer3'>
			<span class='result'><em>Loading...</em></span>
			Before onload, <code>select</code> element dynamically created; <code>data</code> DOM attribute set:
		</li>
		<script type="text/javascript">
		var select = document.createElement('select'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'select');
		select.data = 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E';
		// at this point, select.length == 0 is guaranteed
		var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
		option.appendChild(document.createTextNode('a'));
		select.appendChild(option);
		// at this point, select.length == 1 is guaranteed
		document.getElementById('selectContainer3').appendChild(select);
		</script>

		<li id='selectContainer4'>
			<span class='result'><em>Loading...</em></span>
			Before onload, <code>select</code> element dynamically created; <code>data</code> content attribute set with <code>setAttribute(...)</code>:
		</li>
		<script type="text/javascript">
		var select = document.createElement('select'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'select');
		select.setAttribute('data', 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E');
		// at this point, select.length == 0 is guaranteed
		var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
		option.appendChild(document.createTextNode('a'));
		select.appendChild(option);
		// at this point, select.length == 1 is guaranteed
		document.getElementById('selectContainer4').appendChild(select);
		</script>

		<li id='selectContainer5'>
			<span class='result'><em>Loading...</em></span>
			After onload, <code>data</code> DOM attribute set on statically created element: <select></select>
		</li>
		<script type="text/javascript">
		var func = function(){
			window.setTimeout(
				function(){
					var select = document.getElementById('selectContainer5').getElementsByTagName('select')[0];
					select.data = 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E';
					var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
					option.appendChild(document.createTextNode('a'));
					select.appendChild(option);
					// at this point, select.length == 1 is guaranteed
					window.filledContainers++;
				}, 100
			);
		}
		if(window.addEventListener)
			window.addEventListener("load", func, false);
		else if(window.attachEvent)
			window.attachEvent("load", func);
		</script>

		<li id='selectContainer6'>
			<span class='result'><em>Loading...</em></span>
			After onload, <code>data</code> content attribute set on statically created element: <select></select>
		</li>
		<script type="text/javascript">
		var func = function(){
			window.setTimeout(
				function(){
					var select = document.getElementById('selectContainer6').getElementsByTagName('select')[0];
					select.setAttribute('data', 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E');
					var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
					option.appendChild(document.createTextNode('a'));
					select.appendChild(option);
					// at this point, select.length == 1 is guaranteed
					window.filledContainers++;
				}, 100
			);
		}
		if(window.addEventListener)
			window.addEventListener("load", func, false);
		else if(window.attachEvent)
			window.attachEvent("load", func);
		</script>

		<li id='selectContainer7'>
			<span class='result'><em>Loading...</em></span>
			After onload, <code>select</code> element dynamically created; <code>data</code> DOM attribute set:
		</li>
		<script type="text/javascript">
		var func = function(){
			window.setTimeout(
				function(){
					var select = document.createElement('select'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'select');
					select.data = 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E';
					// at this point, select.length == 0 is guaranteed
					var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
					option.appendChild(document.createTextNode('a'));
					select.appendChild(option);
					// at this point, select.length == 1 is guaranteed
					document.getElementById('selectContainer7').appendChild(select);
					window.filledContainers++;
				}, 100
			);
		}
		if(window.addEventListener)
			window.addEventListener("load", func, false);
		else if(window.attachEvent)
			window.attachEvent("load", func);
		</script>

		<li id='selectContainer8'>
			<span class='result'><em>Loading...</em></span>
			After onload, <code>select</code> element dynamically created; <code>data</code> content attribute set with <code>setAttribute(...)</code>:
		</li>
		<script type="text/javascript">
		var func = function(){
			window.setTimeout(
				function(){
					var select = document.createElement('select'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'select');
					select.setAttribute('data', 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E');
					// at this point, select.length == 0 is guaranteed
					var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
					option.appendChild(document.createTextNode('a'));
					select.appendChild(option);
					// at this point, select.length == 1 is guaranteed
					document.getElementById('selectContainer8').appendChild(select);
					window.filledContainers++;
				}, 100
			);
		}
		if(window.addEventListener)
			window.addEventListener("load", func, false);
		else if(window.attachEvent)
			window.attachEvent("load", func);
		</script>

	</ol>





	<!--<form id='dataAttrTest1'>
	</form>

	<p style="color:red">Also add two more tests: set existing elements onload with setAttribute('data') and el.data = ....</p>

	<form id='dataAttrTest2'>
		<script type="text/javascript">
		var doDataAttrTest2 = function(){
			window.setTimeout(
				function(){
					var select = document.createElement('select'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'select');
					select.setAttribute('data', 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E');
					//select.name = "dynamic";
					// at this point, select.length == 0 is guaranteed
					var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
					option.appendChild(document.createTextNode('a'));
					select.appendChild(option);
					// at this point, select.length == 1 is guaranteed
					document.getElementById('dataAttrTest2').appendChild(select);
					window.doneDataAttrTest2 = true;
				}, 100
			);
		}
		if(window.addEventListener)
			window.addEventListener("load", doDataAttrTest2, false);
		else if(window.attachEvent)
			window.attachEvent("load", doDataAttrTest2);
		</script>
	</form>

	<form id='dataAttrTest3'>
		<script type="text/javascript">
		var doDataAttrTest3 = function(){
			window.setTimeout(
				function(){
					var select = document.createElement('select'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'select');
					select.data = 'data:application/xml,%3Cselect%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20type%3D%22incremental%22%3E%3Coption%3Eb%3C%2Foption%3E%3C%2Fselect%3E';
					//select.name = "dynamic";
					// at this point, select.length == 0 is guaranteed
					var option = document.createElement('option'); //document.createElementNS('http://www.w3.org/1999/xhtml', 'option');
					option.appendChild(document.createTextNode('a'));
					select.appendChild(option);
					// at this point, select.length == 1 is guaranteed
					document.getElementById('dataAttrTest3').appendChild(select);
					window.doneDataAttrTest3 = true;
				}, 100
			);
		}
		if(window.addEventListener)
			window.addEventListener("load", doDataAttrTest3, false);
		else if(window.attachEvent)
			window.attachEvent("load", doDataAttrTest3);
		</script>
	</form>-->

	<script type="text/javascript">
		window.attempts = 0;
		function getTestResults(){
			window.intervalID = window.setInterval(
				function(){
					if(window.filledContainers == 4 || window.attempts > 10){
						var lis = document.getElementById('dynamicDataOnSelectTests').getElementsByTagName('li');
						for(var i = 0; i < lis.length; i++){
							var select = lis[i].getElementsByTagName('select')[0];
							var results = lis[i].getElementsByTagName('span')[0]; //getElementsByClassName('results')
							
							if(select && select.length == 2){
								if(select.options[0].text == 'a' && select.options[1].text == 'b'){
									results.className = 'success';
									results.innerHTML = "Success";
								}
								else {
									results.className = 'failure';
									results.innerHTML = "Failed: the prefilling code was executed too soon";
								}
							}
							else {
								results.className = 'failure';
								results.innerHTML = "Failed: " + (select ? 'only ' + select.length + ' option(s) when 2 required.': 'no select element when one with 2 options required.');
							}
						}
						window.clearInterval(window.intervalID);
					}
					window.attempts++;
				}, 100
			);
		}
		if(window.addEventListener)
			window.addEventListener("load", getTestResults, false);
		else if(window.attachEvent)
			window.attachEvent("onload", getTestResults);	
	</script>


		<hr>
		<a href="http://code.google.com/p/webforms2/">Web Forms 2.0 implementation</a><br>
		Version: 0.5.2 (2007-11-29) <a href="http://code.google.com/p/webforms2/wiki/Changelog">changelog</a>
		<address>
		<a href="http://weston.ruter.net/">Weston Ruter</a>
		</address>
	</body>
</html>